<template>
	<view style="padding: 30rpx 30rpx 0;">
		<uni-forms ref="form" :rules="rules" :modelValue="formData" >
			<uni-forms-item name="username" required>
				<uni-easyinput v-model="formData.username" trim prefixIcon="person" type="text" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item name="password" required>
				<uni-easyinput v-model="formData.password" trim prefixIcon="eye" type="password" placeholder="请输入密码" />
			</uni-forms-item>
			<view class="captcha-box" v-if="captchaBase64">
				<image class="captcha-img" @click="refreshCaptcha" :src="captchaBase64" mode="widthFix"></image>
				<uni-easyinput v-model="formData.captcha" type="text" placeholder="请输入验证码" :inputBorder="false" style="background-color: #F8F8F8;padding: 8rpx 0px;"/>
			</view>
		</uni-forms>
		<button type="default" @click="pwd_login">登录</button>
		<view class="" style="display: flex;justify-content: space-between;margin-top: 20rpx;color: #4CD964;">
			<text @click="forgetPwd" style="color: #333333;">忘记密码</text>
			<text style="text-decoration: underline;" @click="goRegister">无账号?去创建</text>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" @click="miniparamLogin">一键登录</button>
		<!-- #endif -->
		<button type="default" @click="emailLogin">邮箱登陆</button>
	</view>
</template>

<script>
	import rules from '../common/validator.js'
	import mixin from '../common/common.mixin.js'
	export default {
		mixins:[mixin],
		data() {
			return {
				formData:{
					username:'',
					password:'',
					captcha:'',//验证码
				},
				rules,
				captchaBase64:'',
			}
		},
		methods: {
			emailLogin(){
				uni.navigateTo({
					url:'/pages/login/emailLogin'
				})
			},
			miniparamLogin(){
				uni.login({
					success:(res)=> {
					    if (res.code) {
					      //调用云函数发起网络请求
					      uniCloud.callFunction({
					      	name:'uni-id-cf',
							data:{
								action:'loginByWeixin',
								params:res.code
							},
							success: ({result}) => {
								console.log('11')
								console.log(result)
								if(result.code==0){
									console.log('12')
									console.log(this)
									this.loginSuccess(result)
								}else{
									uni.showToast({
										title:result.msg,
										icon:'none'
									})
								}
							}
					      })
					    } else {
					      console.log('登录失败！' + res.errMsg)
					    }
					}
				})
			},
			pwd_login(){
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					uniCloud.callFunction({
						name:'uni-id-cf',
						data:{
							action:'login',
							params:{
								...res,
								captcha:this.formData.captcha
							}
						},
						success: ({result}) => {
							console.log(result)
							if(result.code==0){
								this.loginSuccess(result)
							}else{
								if(result.needCaptcha){
									// 生成验证码
									this.createCaptcha()
								}else{
									uni.showToast({
										title:result.msg,
										icon:'none'
									})
								}
							}
							
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			createCaptcha(){
				uniCloud.callFunction({
					name:'uni-id-cf',
					data:{
						action:'createCaptcha',
						params:{
							scene:'login'
						}
					},
					success: ({result}) => {
						console.log(result)
						if(result.code==0){
							this.captchaBase64=result.captchaBase64
						}
						
					}
				})
			},
			refreshCaptcha(){
				uniCloud.callFunction({
					name:'uni-id-cf',
					data:{
						action:'refreshCaptcha',
						params:{
							scene:'login'
						}
					},
					success: ({result}) => {
						console.log(result)
						if(result.code==0){
							this.captchaBase64=result.captchaBase64
						}
					}
				})
			},
			goRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			// 忘记密码
			forgetPwd(){
				
			}
		}
	}
</script>

<style>
	.captcha-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.captcha-img{
		margin-right:15px;
		width: 250rpx;
	}
</style>
